<template>
	<my-layout :headerTitle="params.item.title" :isback="true">
		<view class="transpotation-detail-content">
			<view class="search">
				<view class="input">
					<image src="../../assets/detail/search.png" mode="widthFix"></image>
					<input type="text" placeholder="输入业务编号/提单号/箱号" placeholder-class="placeholder"/>
				</view>
				<view class="btn">
					搜索
				</view>
			</view>

			<view class="pool">
				<view class="pool-head">
					<view class="tag">提空箱</view>
					<view class="title">
						业务编号：2024072303106828
					</view>
					<view class="status">
						提空箱
					</view>
				</view>
				<template v-for="item in baseList">
					<view class="list" :key="item.label" v-if="!item.list">
						<view class="label">{{item.label}}</view>
						<view class="value">{{item.map}}111111</view>
					</view>
					<view class="list-two" v-else :key="item.list[0].label">
						<view class="list" v-for="el in item.list" :key="el.label">
							<view class="label">{{el.label}}</view>
							<view class="value">{{el.map}}111111</view>
						</view>
					</view>
				</template>


				<view class="pool-panel" v-if="show">
					<view class="banner1">
						<view class="banner-title">
							<view class="title">
								上传箱门照片、箱内照片、封条
							</view>
							<view class="num">
								3/3
							</view>
						</view>
						<view class="img-list">
							<view class="list" key="1">
								<my-upload></my-upload>
							</view>
							<view class="list" key="2">
								<my-upload></my-upload>
							</view>
							<view class="list" key="3">
								<my-upload></my-upload>
							</view>
						</view>
					</view>

					<view class="banner2">
						<view class="banner-title">
							<view class="title">
								<view class="line"></view>
								上传箱门照片、箱内照片、封条
							</view>
							<view class="add">
								+新增
							</view>
						</view>
						<view class="section">
							<view class="section-list">
								<view class="label">费用项目：</view>
								<view class="value">XXXXX项目</view>
							</view>
							<view class="section-list">
								<view class="label">金额：</view>
								<view class="value">
									<input type="text" />
								</view>
							</view>
							<view class="section-list">
								<view class="label">是否垫付：</view>
								<view class="value">
									<label class="radio">
										<radio value="r1" checked="true" /><text>是</text>
									</label>
									<label class="radio">
										<radio value="1" :checked="false" /><text>否</text>
									</label>
								</view>
							</view>
							<view class="section-list">
								<view class="label">结算方式：</view>
								<view class="value">
									<input type="text" />
								</view>
							</view>
							<view class="section-list">
								<view class="label">账户：</view>
								<view class="value">
									<input type="text" />
								</view>
							</view>
							<view class="upload">
								<view class="label">附件（上传）：</view>
								<div class="img-list">
									<view class="list">
										<my-upload></my-upload>
									</view>
								</div>
							</view>
						</view>
					</view>
					<view class="submit">提交</view>
				</view>

				<view class="arrow-btn" :class="{'arrow-btn--expend':show}" @click="expend">
					<image src="../../assets/detail/arrow.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</my-layout>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					section: {},
					item: {},
				},
				baseList: [{
						label: "承运单位",
						map: "",
					},
					{
						label: "船名航次",
						map: "",
					},
					{
						list: [{
								label: "提单号",
								map: "",
							},
							{
								label: "预约号",
								map: "",
							},
						]
					},
					{
						label: "箱号",
						map: "",
					},
					{
						label: "封号",
						map: "",
					},
					{
						label: "箱皮重",
						map: "",
					},
					{
						label: "提箱点",
						map: "",
					},
					{
						label: "装箱点",
						map: "",
					},
					{
						list: [{
								label: "联系人",
								map: "",
							},
							{
								label: "联系电话",
								map: "",
							},
						]
					},
					{
						list: [{
								label: "作业日期",
								map: "",
							},
							{
								label: "提箱时间",
								map: "",
							},
						]
					},
				],
				show: false,
			}
		},
		onLoad(params) {
			console.log(params)
			this.params = JSON.parse(params.params)
		},
		methods: {
			expend() {
				this.show = !this.show
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.transpotation-detail-content {
		height: 100%;
		background: #F6F6F6;
		padding: 24rpx;
		overflow-y: auto;

		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input {
				display: flex;
				align-items: center;
				width: 560rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				padding: 0 16rpx;

				image {
					width: 40rpx;
				}

				input {
					width: 1px;
					flex-grow: 1;
					height: 100%;
					padding: 0 16rpx;
				}
			}
			
			:deep(.placeholder){
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 12px;
				color: #979797;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.btn {
				width: 114rpx;
				height: 60rpx;
				background: #3F4DD4;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				font-style: normal;
				text-transform: none;
			}
		}

		.pool {
			margin: 34rpx 0;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx;

			.pool-head {
				display: flex;
				align-items: center;

				.tag {
					width: max-content;
					height: 36rpx;
					background: #3F4DD4;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					font-style: normal;
					text-transform: none;
					padding: 0 6rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.title {
					width: 1px;
					flex-grow: 1;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #121212;
					text-align: left;
					font-style: normal;
					text-transform: none;
					padding: 0 8rpx;
				}

				.status {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #3F4DD4;
					font-style: normal;
					text-transform: none;
				}
			}



			.list {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.label {
					width: 116rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #121212;
					font-style: normal;
					text-transform: none;
					text-align: left;
				}

				.value {
					width: 1px;
					flex-grow: 1;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.list-two {
				display: flex;
				align-items: center;

				.list {
					width: 50%;
				}
			}

			.pool-panel {
				.banner1 {
					.banner-title {
						margin-top: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #121212;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						num {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					.img-list {
						display: flex;
						margin: 28rpx 0;

						.list {
							width: 168rpx;
							height: 168rpx;

							&+.list {
								margin-left: 20rpx;
							}
						}
					}
				}

				.banner2 {
					.banner-title {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							text-align: left;
							font-style: normal;
							text-transform: none;

							.line {
								width: 6rpx;
								height: 26rpx;
								background: #3F4DD4;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								margin-right: 10rpx;
							}
						}

						.add {
							width: 90rpx;
							height: 48rpx;
							background: #3188FF;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							font-style: normal;
							text-transform: none;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.section {
						margin: 24rpx 0;
						width: 654rpx;
						height: 574rpx;
						background: #F8F8F8;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						padding: 24rpx;


						.section-list {
							display: flex;
							align-items: center;
							justify-content: space-between;

							&+.section-list {
								margin-top: 20rpx;
							}

							.label {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #121212;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							.value {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #121212;
								text-align: left;
								font-style: normal;
								text-transform: none;
								display: flex;
								align-items: center;
								
								.radio{
									&+.radio{
										margin-left: 40rpx;
									}
								}

								input {
									width: 264rpx;
									text-align: right;
								}
							}
						}
						
						.upload{
							margin-top: 20rpx;
							
							.img-list{
								margin-top: 24rpx;
								
								.list{
									width: 168rpx;
									height: 168rpx;
									
									&+.list{
										margin-left:20rpx;
									}
								}
							}
						}
					}
				}

				.submit {
					width: 654rpx;
					height: 72rpx;
					background: #3F4DD4;
					border-radius: 38rpx 38rpx 38rpx 38rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					font-style: normal;
					text-transform: none;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.arrow-btn {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 24rpx;

			&--expend {

				image {
					transform: rotate(180deg);
				}
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>